<template>
	<view :class="lang">
		<u-navbar :is-fixed="true" :title="title" back-icon-name="arrow-leftward">
			<view class="slot-wrap greenbg heigh150">
				<view class="u-navbar-centent-slot"><!-- <text>购卡中心</text> --></view>
			</view>
		</u-navbar>
		<view class="audiolayout">
			<view class="road-audio-layout">
				<view v-for="(item,index) in yuyinglist" :key="index" :class="palyid == index?'roaditem  action':'roaditem'" @click="danaudioplay(index)">
					<view class="roaditemview">
						<view class="roadicon">
							<image v-if="palyid == index" src="../../static/media/audio2.png"></image>
							<image v-else src="../../static/media/audio.png"></image>
						</view>
						</view>
						<view class="roadtxt">
							<text>{{item.name}}</text>
						</view>
				</view>
				<!-- <view class="roaditem" v-for="(item, index) in 20"  :key="index">
					<view class="roaditemview">
						<view class="roadicon">
							<image src="../../static/media/audio.png"></image>
						</view>
						</view>
						<view class="roadtxt">
							<text>考前准备</text>
						</view>
				</view> -->
			</view>
		</view>
		<view class="bos"></view>
	</view>
</template>

<script>
	//接口
	import {
		yuyinlist_api		//路考语音接口
	} from '@/api/index';
	const innerAudioContext = uni.createInnerAudioContext();
	
	export default {
		data() {
			return {
				lang: this.$i18n.locale,
				title: this.$t('mediatxt.路考语'),
				yuyinglist:[],
				palyid:-1,		//播放引起🆔
				mindex:-1		//播放状态   如果-1 第一次播放  
			}
		},
		onLoad() {
			var that = this;
				console.log("jinru biaoz list")
				that.https({
					url: yuyinlist_api,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {},
					success: res => {
						console.log("res---",res);
						that.yuyinglist=res.yuying_list
					},
					fail: err => {
						console.log(err);
					}
				});
		},
		onUnload() {
			console.log("点击返回键：onUnload()")
			innerAudioContext.stop();
		},
		onBackPress() {
			console.log("点击返回键：onBackPress")
			var that = this;
			
			innerAudioContext.stop();
			// uni.navigateTo({
			//     url: '@/pages/index/index'
			// });
		},
		methods: {
			danaudioplay(index) {
				
				var that = this;
				
				console.log('单独播放',index);
				var audiojson = that.yuyinglist;
				
				console.log("that.mindex",that.mindex);
				
				
				
				
				if(that.palyid == index){
					
					if(that.mindex == -1){
						innerAudioContext.pause();
						console.log('暂停了')
						that.mindex = index;
					}else{
						innerAudioContext.play();
						console.log('播放了')
						that.mindex = -1;
					}
				}else{
					innerAudioContext.stop();
					innerAudioContext.src = audiojson[index].audio;
					that.mindex = -1;
					console.log('第一次播放了')
					setTimeout(function(){
						innerAudioContext.play();
					},30)
				}
				
				
				
				innerAudioContext.onPlay(function(){
					that.palyid = index;
				})
				
				innerAudioContext.onError(res => {
					console.log(res.errMsg);
					console.log(res.errCode);
					that.palyid = -1;
					that.mindex = -1;
				});
				innerAudioContext.onEnded(function(res) {
					innerAudioContext.stop();
					that.palyid = -1;
					that.mindex = -1;
				});
			},
		}
	}
</script>

<style>
	
.audiolayout{
	width: 730rpx;
	margin: 0 auto;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	overflow: hidden;
	overflow-y: scroll;
	height: calc(100vh - 44px);
}
.road-audio-layout{
		width: 730rpx;
		display: flex;
		justify-content: space-between;
		flex-flow: row wrap;
	}
	.roaditem{
		width: 170rpx;
		height: 170rpx;
		display: inline-block;
	}
	.roaditemview{
		width: 170rpx;
		height: 90rpx;
	}
	.roadicon{
		width: 75rpx;
		height: 75rpx;
		border-radius: 50%;
		margin: 0 auto;
		background: #1794f4;
		text-align: center;
		vertical-align: middle;
	}
	.roadicon image{
		width: 50rpx;
		height: 50rpx;
		/* margin-top: 15rpx; */
		padding-top: 15rpx;
		margin-left: 13rpx;
	}
	.action .roadicon{
		background: #0cd34e !important;
	}
	.action .roadtxt{
		color: #0cd34e !important;
	}
	.roadtxt{
		width: 170rpx;
		height: 60rpx;
		text-align: center;
		color: #565656;
	}
</style>
